<template>
	<div v-loading="tableLoading" class="" style="display: flex;">
		<div class="spline-components-container" :style="{height: `${height}px`}">
			<split-pane split="vertical" :default-percent="defaultPercent" @resize="resize">
				<template slot="paneL">
					<!--左侧表格-->
					<left-table
						:check-arr="checkArr"
						:scroll-top="leftScrollTop"
						:height="height"
						:table-data="tableData"
						:table-option="tableOption"
						:hover-index="leftHoverIndex"
						@on-scroll="onScrollOfLeftTable"
						@on-mouse="onMouseOfLeftTable"
						@on-check="onCheckRow"
						@on-clear="onClearCheck"
						@on-check-change="onCheckChange"
					></left-table>
				</template>
				<template slot="paneR">
					<!--右侧甘特图-->
					<right-table
						:check-arr="checkArr"
						:table-header-switch-type="tableHeaderSwitchType"
						:scroll-top="rightScrollTop"
						:progress-bar-text-key1="tableOption.progressBarTextKey1"
						:progress-bar-text-key2="tableOption.progressBarTextKey2"
						:height="height"
						:table-data="tableData"
						:start-date-key-name="tableOption.startDateKeyName"
						:table-date-header="rightTableHeader"
						:hover-index="rightHoverIndex"
						@on-scroll="onScrollOfRightTable"
						@on-mouse="onMouseOfRightTable"
						@on-check="onCheckRow"
					></right-table>
				</template>
			</split-pane>
		</div>
	</div>
</template>
<script>
    import splitPane from 'vue-splitpane';
    import leftTable from './components/left-table';
    import rightTable from './components/right-table';
    import { formatDate } from '../../../utils/jk/jk-tool';
    export default {
        components: { leftTable, splitPane, rightTable },
        props: {
            tableLoading: {
                type: Boolean,
                default: true
            },
            height: {
                type: Number,
                default: 0
            },
            defaultPercent: {
                type: Number,
                default: 20
            },
            tableHeaderSwitchType: {
                type: String,
                default: 'date'
            },
            tableOption: {
                type: Object,
                default() {
                    return {
                        progressBarTextKey1: '', // 展示在进度条内的字段1
                        progressBarTextKey2: '', // 展示在进度条内的字段2
                        leftTableHeader: [],
                        dateFrom: '',
                        dateTo: '',
                        rowList: [],
                        startDateKeyName: '', // 进度开始时间
                        endDateKeyName: '' // 进度结束的时间
                    };
                }
            }
        },
        data() {
            return {
                tableData: [],
                rightTableHeader: [],
                checkArr: [],
                rightHoverIndex: null,
                leftHoverIndex: null,
                leftScrollTop: 0,
                rightScrollTop: 0
            };
        },
        methods: {
            onCheckChange(arr) {
                this.$emit('on-check-change', arr);
            },
            onClearCheck() {
                this.checkArr = [];
            },
            resize() {
            },
            onCheckRow(id) {
                const has = this.checkArr.some(x => x === id);
                if (has) {
                    let i = null;
                    this.checkArr.forEach((x, idx) => {
                        if (x === id) i = idx;
                    });
                    this.checkArr.splice(i, 1);
                } else {
                    this.checkArr.push(id);
                }
            },
            onMouseOfLeftTable(index) {
                this.rightHoverIndex = index;
            },
            onMouseOfRightTable(index) {
                this.leftHoverIndex = index;
            },
            onScrollOfRightTable({ scrollTop }) {
                this.leftScrollTop = scrollTop;
            },
            onScrollOfLeftTable({ scrollTop }) {
                this.rightScrollTop = scrollTop;
            },
            formatTableData() {
                const tData = this.tableOption.rowList.map(x => {
                    x.taskList.forEach(k => {
                        let endD = '';
                        // 完工日期晚于查询的的结束日期时，只能显示查看日期内的天数
                        if (Date.parse(k[this.tableOption.endDateKeyName]) > Date.parse(this.tableOption.dateTo)) {
                            endD = this.tableOption.dateTo;
                        } else {
                            endD = k[this.tableOption.endDateKeyName];
                        }
                        // 开工时间晚于查询的的开始日期时
                        if (Date.parse(k[this.tableOption.startDateKeyName]) > Date.parse(this.tableOption.dateFrom)) {
                            k.isBefore = true;
                            k.days = (Date.parse(endD) - Date.parse(k[this.tableOption.startDateKeyName])) / 24 / 60 / 60 / 1000 + 1;
                        } else {
                            k.isBefore = false;
                            k.days = (Date.parse(endD) - Date.parse(this.tableOption.dateFrom)) / 24 / 60 / 60 / 1000 + 1;
                        }
                        // 实际天数
                        k.actualDays = (Date.parse(k[this.tableOption.endDateKeyName]) - Date.parse(k[this.tableOption.startDateKeyName])) / 24 / 60 / 60 / 1000 + 1;
                        // k.ratio = k.bottleProductionQuantity ? mathJsDiv(k.quantityProduced, k.bottleProductionQuantity) : 0;
                        k.ratio = 0;
                    });

                    return x;
                });
                const startDate = this.tableOption.dateFrom;
                const endDate = formatDate(this.tableOption.dateTo);
                this.rightTableHeader = {
                    startDate: startDate,
                    endDate: endDate,
                    tableHeaderAllDays: (Date.parse(endDate) - Date.parse(startDate)) / 24 / 60 / 60 / 1000 + 1,
                    toDay: formatDate(Date.now())
                };
                this.tableData = tData.map(x => {
                    x.tableHeaderAllDays = (Date.parse(endDate) - Date.parse(startDate)) / 24 / 60 / 60 / 1000 + 1;
                    return x;
                });
            }

        },
        watch: {
            tableOption: {
                handler() {
                    this.formatTableData();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
<style scoped lang="scss">
    .spline-components-container {
        position: relative;
        width: 100%;
        border: solid 1px #e8eaec;
        //border-left: solid 1px #e8eaec;
        //border-right: solid 1px #e8eaec;
        //border-bottom: solid 1px #e8eaec;
        border-radius: 6px;
        overflow: hidden;
    }
</style>
